<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<input name="baseUrl" id="baseUrl" value="<?php echo $baseurl?>" type="hidden" />
<link rel="stylesheet" href="<?php echo $baseurl?>public/assets/export/css/style.default.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $baseurl?>public/assets/css/font-awesome.min.css" type="text/css" />
<script type="text/javascript" src="<?php echo $baseurl?>public/assets/export/js/plugins/jquery-1.7.min.js"></script>
<link href="<?php echo $baseurl?>public/theme/analytics/minify/packed/ffb21cf361dba4863b5bc58231e6e8c0.min.css?v=1408111867" type="text/css" rel="stylesheet" />
<script src="<?php echo $baseurl?>public/assets/js/custom.js"></script>
<style>
.highcharts-title tspan {
font-family: Arial !important;
}
.page-header{
    margin: 20px 0 15px;
    border-bottom: none 0;
}
[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 0px !important;
}
</style>
<script type="text/javascript" src="<?php echo $baseurl?>public/theme/analytics/picker/moment.js"></script>
<script type="text/javascript" src="<?php echo $baseurl?>public/theme/analytics/picker/daterangepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  var cb = function(start, end, label) {
    //console.log(start.toISOString(), end.toISOString(), label);
    $('#reportrange span').html(start.format('DD/MM/YYYY HH:mm') + ' - ' + end.format('DD/MM/YYYY HH:mm'));
    $("#times").val(start.format('YYYYMMDDHHmm00') + '|' + end.format('YYYYMMDDHHmm59'));
    $("#times-start").val(start.format('YYYY-MM-DD HH:mm:00'));
    $("#times-end").val(end.format('YYYY-MM-DD HH:mm:59'));
    
    $("#timeranger").html('Từ ' + start.format('DD-MM-YYYY HH:mm:00') + ' đến ' + end.format('DD-MM-YYYY HH:mm:59'));
    $("#time-start-f").val(start.format('DD-MM-YYYY HH:mm:00'));
    $("#time-end-f").val(end.format('DD-MM-YYYY HH:mm:59'));
  }

  var optionSet1 = {
    startDate: moment().subtract('days', 0),
    endDate: moment(),
    minDate: '01/01/<?php echo (date('Y') - 1)?>',
    maxDate: '12/31/<?php echo (date('Y') + 10)?>',
    dateLimit: { days: 365 },
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: true,
    timePickerIncrement: 1,
    timePicker12Hour: true,
    ranges: {
       'Hôm nay': [moment().startOf('day'), moment()],
       'Hôm qua': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
       '7 ngày trước': [moment().subtract('days', 6).startOf('day'), moment().endOf('day')],
       '30 ngày trước': [moment().subtract('days', 29).startOf('day'), moment().endOf('day')],
       'Tháng này': [moment().startOf('month').startOf('day'), moment().endOf('month')],
       'Tháng trước': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    },
    opens: 'left',
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-small btn-primary',
    cancelClass: 'btn-small',
    format: 'DD/MM/YYYY HH:mm',
	timePicker: true,
    separator: ' to ',
    locale: {
        applyLabel: 'Đồng ý',
        cancelLabel: 'Hủy bỏ',
        fromLabel: 'Từ',
        toLabel: 'đến',
        customRangeLabel: 'Chọn thời gian',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
        monthNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        firstDay: 1
    }
  };

  var optionSet2 = {
    startDate: moment().subtract('days', 7),
    endDate: moment(),
    opens: 'left',
    ranges: {
       'Hôm nay': [moment(), moment()],
       'Hôm qua': [moment().subtract('days', 1), moment().subtract('days', 1)],
       '7 ngày trước': [moment().subtract('days', 6), moment()],
       '30 ngày trước': [moment().subtract('days', 29), moment()],
       'Tháng này': [moment().startOf('month'), moment().endOf('month')],
       'Tháng trước': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    }
  };
  $('#reportrange span').html('Tất cả thời gian');//alert('sdf');
  //$('#times').val();
  $('#reportrange').daterangepicker(optionSet1, cb);

  $('#reportrange').on('show.daterangepicker', function() { console.log("show event fired"); });
  $('#reportrange').on('hide.daterangepicker', function() { console.log("hide event fired"); });
  $('#reportrange').on('apply.daterangepicker', function(ev, picker) { 
    console.log("apply event fired, start/end dates are " 
      + picker.startDate.format('DD/MM/YYYY HH:mm') 
      + " to " 
      + picker.endDate.format('DD/MM/YYYY HH:mm')
    ); 
  });
  $('#reportrange').on('cancel.daterangepicker', function(ev, picker) { console.log("cancel event fired"); });

  $('#options1').click(function() {
    $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
  });

  $('#options2').click(function() {
    $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
  });

  $('#destroy').click(function() {
    $('#reportrange').data('daterangepicker').remove();
  });
  
});

function ajaxReporting()
  {
    var time1 = $("#time-start-f").val();    
    var time2 = $("#time-end-f").val();
    $.ajax({
        type: "GET",
        url: "<?php echo $baseurl?>ajax-reporting-agency",
        data: ({times: $("#times").val(), times_start: $("#times-start").val(), times_end: $("#times-end").val(), customer_id: $("#select-customer").val()}),
        beforeSend: function(){
            $(".layout2").css('display','block');
        },
        success: function(data){
            $(".layout2").css('display','none');
            $("#page_show").html(data);
            if(time1.length > 0){
                $("#timeranger").html('Từ ' + time1 + ' đến ' + time2);   
            }else{
                $("#timeranger").html('Tất cả thời gian');
            }
        }
    });
    return false;
  }
</script>

<style>
    .closepopup{
        position: fixed;
        top: 0;
        right: 0;
        width: 40px;
        height: 38px;
        background-color: rgba(225,102,0,.6);
        border-bottom-left-radius: 50% !important;
        border-bottom-right-radius: 5% !important;
        border-top-left-radius: 5% !important;
        border-top-right-radius: 0 !important;
        border-radius: 50%;
        border: 0;
        line-height: 1;
        font-size: 18px;
        cursor: pointer;
        z-index: 99999;
    }
</style>
<button class="closepopup" onclick="closeIframe()"><i class="fa fa-close"></i></button>
<div class="pageheader">
            <ul class="hornav">
                <li class="current" style="width:  200px;"><a href="#updates">Báo cáo</a></li>
            </ul>
</div><!--pageheader-->

<div id="contentwrapper" class="contentwrapper">
	<div id="updates" class="subcontent">
            <div class="two_third content_left" style="width: 98%">
            <div class="tableoptions" style="padding: 15px;">
                <span onclick="exportToExcel()" id="addCategories" class="submit radius2">Xuất file excel</span>
                <span onclick="exportToDoc()" id="addCategories" class="submit radius2">Xuất file word</span>
                <span onclick="closeIframe()" id="addCategories" class="submit radius2">Hủy bỏ</span>
                
                <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; height: 34px; padding: 5px 10px; box-sizing: border-box; border: 1px solid #ccc;position: absolute;right: 230px;top: 10px;">
                      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                      <span></span> <b class="caret" style="margin-top: 8px;"></b>
                      <input type="hidden" id="times" value="" />
                      <input type="hidden" id="times-start" value="" />
                      <input type="hidden" id="times-end" value="" />
                      <input type="hidden" id="time-start-f" value="" />
                      <input type="hidden" id="time-end-f" value="" />
                </div>
                
                <select id="select-customer" style="position: absolute;width: 150px;min-width: 0;top: 10px;right: 75px;height: 34px;font-size: 14px;">
                    <option>Chọn khách hàng</option>
                    <?php echo $fview->putOptionSelect($listCustomers);?>
                </select>
            </div>
            <input type="hidden" name="idCheck" id="idCheck" value="" />
            <input type="hidden" name="delete" id="delete" value="" />
            <input type="hidden" name="control" id="control" value="" />
            <input type="hidden" name="urlProduct" id="urlProduct" value="" />
            <div id="boxTool">
            
            
            
            </div>
            <div class="span-full" id="page">
                <div class="block" style="border-radius: 5px">                        
                   <div class="block-fluid" id="page_show">
                        <table cellpadding="0" cellspacing="0" width="100%" id="Categrories" class="table stdtable stdtablecb">
                            <thead>
                                <tr>
                                    <td colspan="10" style="background: #F2F2F2;text-align: center; padding: 10px">Thống kê chiến dịch</td>
                                </tr>
                                <tr>
                                    <td colspan="10" style="background: #E7E7E7;text-align: right">Thời gian: <span id="timeranger">Tất cả thời gian</span></td>
                                </tr>
                				<tr>
                					<th rowspan="2">Chiến dịch</th>
                					<th rowspan="2">Địa điểm</th>
                					<th colspan="2">Sức thu hút</th>
                					<th colspan="3">Hành vi</th>
                					<th colspan="3">Chuyển đổi</th>
                				</tr>
                				<tr>
                					<th>Lượt truy cập</th>
                					<th>Số người dùng</th>
                					<th>Tỷ lệ thoát trang chào</th>
                					<th>Thời gian trung bình trang chào(s)</th>
                                    <th>Thời gian trung bình trang đích(s)</th>
                					<th>Tỷ lệ tương tác</th>
                					<th>Số lần hiển thị trang chào</th>
                                    <th>Số lần hiển thị trang đích</th>
                				</tr>
                			</thead>
                            <tbody>
                            <?php foreach($campaignReport AS $el=>$le):?>
                                <tr>
                            		<td><?php echo $le->campaign_title?></td>
                            		<td><?php echo $le->nameplace?></td>
                            		<td><?php echo $le->total_visit?></td>
                            		<td><?php echo $le->user_visit?></td>
                            		<td><?php echo $le->personNoClick?></td>
                                    <td><?php echo $le->time_welcome_page;//$fview->convertDeltatime($le->time_welcome_page);?></td>
                            		<td><?php echo $le->time_landing_page;//$fview->convertDeltatime($le->time_landing_page);?></td>
                            		<td><?php echo $le->personClick?></td>
                                    <td><?php echo $le->welcome_page?></td>
                                    <td><?php echo $le->landing_page?></td>
                            	</tr>
                            <?php endforeach;?>
                            </tbody>
                        </table>
                    </div> 
                </div>
            </div>
        </div>
    </div>
     <div class="orverlay">
            <div class="box_orverlay">
                Đang xuất file...
            </div>
        </div>
     <div class="orverlay layout2">
            <div class="box_orverlay">
                <img src="<?php echo $baseurl?>public/theme/analytics/images/loading.GIF" /> Đang tải dữ liệu...
            </div>
        </div>
        <style>
        .orverlay{
            left: 0px;float: left;width: 100%;background: url('public/theme/analytics/images/black_opacity.png') repeat; height: 100%;position: fixed;top: 0;z-index: 99999999;overflow: auto;box-sizing: border-box;display: none;padding-top:15%
        }
        .orverlay .box_orverlay{
            margin: 60px auto;width: 110px;background: #FFF;font-size: 15px;color: #666;padding: 10px;
        }
        .orverlay .box_orverlay h2{
            float: left;width: 100%;margin-top: -3px;background: orange;color: #fff;font-weight: normal;
        }
        .orverlay .box_orverlay p{
            padding: 5px 10px
        }
        
        .layout2 .box_orverlay{
            margin: 60px auto;width: 160px;background: #FFF;font-size: 15px;color: #666;padding: 10px;
        }
        </style>
    <script>
    window.parent.$(".orverlay").css('display','none');
    function exportToExcel()
    {
        var data='<table border="1">'+jQuery("#Categrories").html().replace(/<a\/?[^>]+>/gi, '')+'</table>';
        jQuery('body').prepend("<form method='post' action="+'<?php echo site_url()?>/exportexcel.php'+" style='display:none' id='Categroriess'><textarea type='text' name='tableData' >"+data+"</textarea></form>");        
        $(".orverlay").css('display', 'block');
        jQuery('#Categroriess').submit(function(e)
        {
            setTimeout(function()
            {
                $(".orverlay").css('display', 'none');
            }, 6000);
        });
        jQuery('#Categroriess').submit().remove();
        //setTimeout(function(){closeIframe();}, 5000);
        return false;
    }
    function exportToDoc()
    {
        var data='<table border="1" align="center">'+jQuery("#Categrories").html().replace(/<a\/?[^>]+>/gi, '')+'</table>';
        jQuery('body').prepend("<form method='post' action="+'<?php echo site_url()?>/exportdoc.php'+" style='display:none' id='Categroriess'><textarea type='text' name='tableData' >"+data+"</textarea></form>");        
        $(".orverlay").css('display', 'block');
        jQuery('#Categroriess').submit(function(e)
        {
            setTimeout(function()
            {
                $(".orverlay").css('display', 'none');
            }, 6000);
        });
        jQuery('#Categroriess').submit().remove();
        //setTimeout(function(){closeIframe();}, 5000);
        return false;
    }
    </script>